<template >
	<div class="contain-report">
		<div class="report-title"><span style="cursor: pointer" @click="goBack">查看实验评测</span> <span style="color: #666">/{{name}}</span></div>
		<div class="report-name">
			<span></span>
			<span>{{name}}</span>
			<span></span>
		</div>
		<div class="report-body">
			<div class="topic-list"  v-for="(item,index) in answerList" :key="item.id">
				<template v-if="item.type ===1">
					<div class="list-title" >{{index + 1}}.{{item.name}} (单选题)</div>
					<el-radio-group  v-model="item.userAnswer" disabled style="display: flex;flex-flow: column nowrap;align-items: flex-start;margin-top: 10px;">
						<el-radio v-for="(item1,index1) in item.question " :key="index1" :label="item1" style="margin: 5px 0">{{item1}}</el-radio>
					</el-radio-group>
					<div class="really">
						正确答案 : {{item.answer}}
					</div>
				</template>
				<template v-if="item.type === 2">
					<div class="list-title">{{index + 1}}.{{item.name}} (多选题)</div>
					<el-checkbox-group  v-model="muplite" disabled style="display: flex;flex-flow: column nowrap;align-items: flex-start;margin-top: 10px;">
						<el-checkbox v-for="(item1,index1) in item.question " :key="index1" :label="item1" name="type"></el-checkbox>
					</el-checkbox-group>
					<div class="really">
						正确答案 : {{item.answer}}
					</div>
				</template>
				<template v-if="item.type === 3">
					<div class="list-title" >{{index + 1}}.{{item.name}} (判断题)</div>
					<el-radio-group  v-model="item.userAnswer" disabled style="display: flex;flex-flow: column nowrap;align-items: flex-start;margin-top: 10px;">
						<el-radio v-for="(item1,index1) in item.question " :key="index1" :label="item1" style="margin: 5px 0">{{item1}}</el-radio>
					</el-radio-group>
					<div class="really">
						正确答案 : {{item.answer}}
					</div>
				</template>
				<template v-if="item.type === 4">
					<div class="list-title" >{{index + 1}}.{{item.name}} (主观题)</div>
					<el-input style="margin-top: 10px" type="textarea" v-model="item.userAnswer" disabled :rows="1" resize="none" placeholder="请输入内容" ></el-input>
					<div class="footer-box">
						<p style="margin-bottom: 5px">点评:</p>
						<el-input
								type="textarea"
								:rows="4"
								disabled
								v-model="item.message"
								placeholder="请输入点评内容"
								resize="none"
						>
						</el-input>
					</div>
				</template>
			</div>
		
		</div>
	
	</div>
</template >

<script >
    import {studentQuestions} from "../../api/questions";

    export default {
        name: "commentDetails",
        data(){
            return{
                answerList:[],
                name:'',
                muplite:[],
                form:{
                    evaluationLogId:this.$route.query.id,
                    theaterInfoVos:[]
                }
            }
        },
        mounted() {
            this.getData()
        },
		methods:{
            goBack(){
                this.$router.go(-1)
            },
            async getData(){
                const { data } =await studentQuestions(this.$route.query.id)
                if (data.code === 200){
                    this.name = data.data.name
                    this.answerList = data.data.data
                    for (let i = 0;i< this.answerList.length;i++){
                        if (this.answerList[i].type !== 4){
                            let arr = []
                            this.answerList[i].content = JSON.parse(this.answerList[i].content)
                            this.answerList[i].content.forEach(item => {
                                arr.push(item.answer)
                                this.answerList[i].question = arr
                            })
                            // this.answerList[i].question = this.answerList[i].content
                        }
                        if(this.answerList[i].type === 2){
                            this.muplite =  this.answerList[i].userAnswer.split(',')
                            this.answerList[i].answer = JSON.parse(this.answerList[i].answer).toString()
                        }
                    }
                    console.log(this.answerList)
                }
            },
		}
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 20px;
			color: #333;
		}
		.report-name{
			width: 100%;
			font-size: 20px;
			color: #333;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.report-body{
			margin: 20px auto;
			width: 60%;
			padding: 10px;
			border-radius: 10px;
			box-shadow: 0 0 10px 2px rgba(255,255,255,0.1);
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #ffffff;
			.topic-list{
				margin: 10px 0;
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				.list-title{
					font-size: 16px;
					color: #333;
					text-align: center;
				}
				.footer-box{
					margin-top: 20px;
					width: 100%;
					/deep/.el-textarea__inner{
						border: none;
						background-color: #f0f0f0;
						color: #999;
					}
				}
				.really{
					margin-top: 10px;
					color: red;
					font-weight: bold;
				}
				::v-deep .el-radio {
					.el-radio__input {
						.el-radio__inner {
							border-radius: 2px;
							
						}
					}
					.el-radio__input.is-checked .el-radio__inner::after {
						content: '';
						width: 8px;
						height: 3px;
						border: 2px solid #999;
						border-top: transparent;
						border-right: transparent;
						text-align: center;
						display: block;
						position: absolute;
						color: red;
						top: 2px;
						left: 1px;
						vertical-align: middle;
						transform: rotate(-45deg);
						border-radius: 0px;
						background: none;
					}
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #f0f0f0;
					color: #999;
				}
			}
			
		}
		.report-btn{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
